<!doctype html>
<html>
  <head>
    <title>CodeMirror 2: Code Folding Demo</title>
    <link rel="stylesheet" href="../lib/codemirror.css">
    <script src="../lib/codemirror.js"></script>
    <script src="../lib/util/foldcode.js"></script>
    <link rel="stylesheet" href="../theme/default.css">
    <script src="../mode/javascript/javascript.js"></script>
    <link rel="stylesheet" href="../css/docs.css">

    <style type="text/css">
      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
      .CodeMirror-gutter {min-width: 3em; cursor: pointer;}
    </style>
  </head>
  <body>
    <h1>CodeMirror 2: Code Folding Demo</h1>

    <form><div style="max-width: 50em"><textarea id="code" name="code"></textarea></div></form>

    <script id="script">
window.onload = function() {
  var te = document.getElementById("code");
  var sc = document.getElementById("script");
  te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");

  var foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder);
  function keyEvent(cm, e) {
    if (e.keyCode == 81 && e.ctrlKey) {
      if (e.type == "keydown") {
        e.stop();
        setTimeout(function() {foldFunc(cm, cm.getCursor().line);}, 50);
      }
      return true;
    }
  }

  window.editor = CodeMirror.fromTextArea(te, {
    mode: "javascript",
    lineNumbers: true,
    lineWrapping: true,
    onGutterClick: foldFunc,
    onKeyEvent: keyEvent
  });

  foldFunc(editor, 6);
  foldFunc(editor, 16);
};
</script>

    <p>Demonstration of code folding using the code
    in <a href="../lib/util/foldcode.js"><code>foldcode.js</code></a>.
    Press ctrl-q or click on the gutter to fold a block, again
    to unfold.</p>
  </body>
</html>
